<!--
 * @Author: wuzhen
 * @Date: 2020-01-13 13:28:41
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-16 14:13:30
 * @Description: 群组图片
 -->
<template>
  <div
    class="img-group"
    :style="{ width: `${width}px`, height: `${height}px` }"
  >
    <div class="img">
      <template v-for="(img, index) in imgs">
        <img
          :src="img"
          :key="index"
          v-if="index < 9"
          :style="{
            width: `${width / (imgs.length > 4 ? 3 : 2)}px`,
            height: `${height / (imgs.length > 4 ? 3 : 2)}px`
          }"
        />
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImgGroup",
  props: {
    width: {
      type: Number,
      default: 50
    },
    height: {
      type: Number,
      default: 50
    },
    imgs: {
      type: Array,
      default: () => []
    }
  }
};
</script>
<style scoped lang="less">
.img-group {
  background: #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 10px;
  .img {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      display: block;
      border: 0.5px solid #ddd;
    }
  }
}
</style>
